<template>
	<view class="login">
		<view class="login-title">{{loginType=='login'?'欢迎登陆':'注册'}}</view>
		<view class="login-register">
			<template v-if="loginType=='login'">
				<text>还没有账号，</text>
				<text @click="loginType='register'">立即注册</text>
			</template>
		</view>
		<view class="login-form">
			<view class="input-box">
				<view class="numer-type">+86</view>
				<input type="number" placeholder="输入手机号">
			</view>
			<view class="input-box" v-if="loginType=='login'">
				<input type="password" placeholder="输入密码">
			</view>
			<view class="input-box" v-else>
				<input type="text" placeholder="验证码">
				<view class="phone-code" @click="startCountdown">{{sendMsg}}</view>
			</view>
		</view>
		<view class="login-button">登录</view>
		<button class="login-switch" v-if="loginType=='login'" open-type="getPhoneNumber"
			@getphonenumber="getPhoneNumber">一键登录</button>
		<view class="login-switch" v-else @click="loginType='login'">账号登录</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const loginType = ref('login')
	const sendMsg = ref('发送验证码')
	const countTime = ref(60)
	const countInterval = ref('')

	uni.hideHomeButton()
	uni.showShareMenu()
	
	// 验证码倒计时
	const startCountdown = () => {
		if (countInterval.value) return
		uni.showToast({
			icon: "none",
			title: "发送成功"
		})
		let time = countTime.value
		countInterval.value = setInterval(() => {
			// 更新剩余时间
			time--;
			// 判断剩余时间是否为0，如果为0，则停止计时器
			sendMsg.value = `${time}s`;
			if (time <= 0) {
				clearInterval(countInterval.value);
				countInterval.value = ''
				sendMsg.value = '重新发送';
			}
		}, 1000);
	}

	// 获取手机号
	const getPhoneNumber = (e) => {
		try {
			if (e.detail.errMsg) throw e.detail.errMsg;
			uni.redirectTo({
				url: "/pages/index/index"
			})
		} catch (error) {
			uni.showToast({
				icon: "none",
				title: error
			})
		}
	}

	// 登录
</script>

<style lang="scss" scoped>
	.login {
		padding: 100rpx 48rpx 80rpx 48rpx;

		&-title {
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
		}

		&-register {
			height: 40rpx;
			font-size: 28rpx;
			color: #b0b0b0;
			margin-top: 20rpx;

			text {
				&:last-child {
					color: $uni-color-primary;
				}
			}
		}

		&-form {
			margin-top: 100rpx;

			.input-box {
				padding: 20rpx 40rpx;
				background-color: #f5f7f6;
				border-radius: 68rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;

				input {
					flex: 1;
					height: 60rpx;
				}
			}
		}

		&-button {
			width: 100%;
			height: 98rpx;
			background-color: $uni-color-primary;
			border-radius: 68rpx;
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #fff;
			box-shadow: 0 0 12rpx rgba(0, 112, 255, 0.4);
		}

		&-switch {
			font-size: 30rpx;
			letter-spacing: 2rpx;
			color: #676767;
			text-align: center;
			margin-top: 48rpx;
			background-color: transparent;
			height: 60rpx;
			line-height: 30rpx;

			&::after {
				content: unset;
			}
		}
	}

	.phone-code {
		font-size: 28rpx;
		color: #333;
		width: 180rpx;
		text-align: right;
	}

	.numer-type {
		margin-right: 20rpx;
		padding-right: 20rpx;
		border-right: 2rpx solid #ccc;
	}
</style>
